<template>
  <div>
    <div style="display: flex; justify-content: center; margin-top: 20px">
      <el-input
        placeholder="通过用户名搜索用户"
        prefix-icon="el-icon-search"
        style="width: 400px; margin-right: 20px"
        v-model="keywords"
        @keydown.enter.native="doSearch"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="doSearch"
        >搜索</el-button
      >
      <el-button type="danger"  @click="showRegisterView"
    >添加用户</el-button>
    </div>
    <div class="admin-container">
      <el-card class="admin-card" v-for="(admin, index) in admins" :key="index">
        <div slot="header" class="clearfix">
          <span>{{ admin.name }}</span>
          <el-button
            style="float: right; padding: 3px 0; color: red"
            type="text"
            icon="el-icon-delete"
            @click="deleteAdmin(admin)"
          ></el-button>
        </div>
        <div>
          <div class="img-content">
            <img
                src="../../assets/userHead.png"
              :alt="admin.name"
              :title="admin.name"
              class="userFace-img"
            />
          </div>
        </div>
        <div class="userInfo">
          <div type="success">编号:{{ admin.id }}</div>
          <div>姓名:{{ admin.name }}</div>
          <div>手机号码:{{ admin.phone }}</div>
          <div>
            用户状态:
            <el-switch
              v-model="admin.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              @change="enabledChange(admin)"
            >
            </el-switch>
          </div>
          <div>
            用户角色:
            <el-tag
              style="margin-right: 10px"
              type="success"
              v-for="(authority, indexj) in admin.authorityList"
              :key="indexj"
              >{{ authority.permissionName }}</el-tag
            >
            <el-popover
              placement="right"
              title="角色列表"
              width="200"
              @show="showPop(admin)"
              @hide="hidePop(admin)"
              trigger="click"
            >
              <el-select v-model="selectRoles" multiple   placeholder="请选择">
                <el-option
                  v-for="(authority, index) in allRoles"
                  :key="index"
                  :label="authority.permissionName"
                  :value="authority.id"
                >
                </el-option>
              </el-select>
              <el-button
                slot="reference"
                type="text"
                icon="el-icon-more"
              ></el-button>
            </el-popover>
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-row>
          <el-form   :model="register" >

            <el-form-item  label="用户名:" prop="registerUserName" style="margin-right: 10px">
              <el-input   v-model="register.username" placeholder="请输入用户名" ></el-input>
            </el-form-item>
            <el-form-item  label="姓名:" prop="registerName" style="margin-right: 10px">
              <el-input   v-model="register.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="密码 :" prop="registerPassword" style="margin-right: 10px">
              <el-input v-model="register.password"   type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码 :" prop="registerPassword"  style="margin-right: 10px">
              <el-input v-model="register.password1" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="性别:" prop="registerSex" style="margin-right: 10px">
              <el-radio v-model="register.sex" label="男">男</el-radio>
              <el-radio v-model="register.sex" label="女">女</el-radio>
            </el-form-item>

            <el-form-item label="电话 :" prop="registerPhone"  style="margin-right: 10px">
              <el-input v-model="register.phone"  placeholder="请输入电话号码"></el-input>
            </el-form-item>

          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddRegister">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SystemUserinfoManagement",
  data() {
    return {
      register:{
        id:'0',
        username:'test',
        password:'123',
        password1:'123',
        phone:'18859636965',
        name:'测试',
        sex:'女',
        enabled:'true',
      },
      dialogVisible:false,
      admins: [],
      userFace:'../../assets/head.png',
      keywords: "",
      allRoles: [],
      selectRoles: [],
      updateadmininfo:{
        enabled: '',
        id:'',
        name: '',
        password: '',
        phone: '',
        sex:'' ,
       username: ''
      },
    };
  },
  mounted() {
    this.initAdmins();
  },
  methods: {
    doAddRegister(){
      if (this.register.password===this.register.password1)
      {
        this.register.enabled=true;
        this.postRequest("/register",this.register).then(resp=>{
          if (resp){
            this.dialogVisible=false;
            this.initAdmins();
          }
        })
      }
      else {
        this.$message.error("两次输入的密码不一致");
      }

    },
    showRegisterView()
    {
      this.dialogVisible=true;
    },
    hidePop(admin) {
      let roles = [];
      Object.assign(roles, admin.roles);
      let flag = false;
      if (roles.length !== this.selectRoles.length) {
        flag = true;
      } else {
        for (let i = 0; i < roles.length; i++) {
          let role = roles[i];
          for (let j = 0; j < this.selectRoles.length; j++) {
            let sr = this.selectRoles[j];
            if (role.id === sr) {
              roles.splice(i, 1);
              i--;
              break;
            }
          }
        }
        if (roles.length !== 0) {
          flag = true;
        }
      }
      if (flag) {
        let url = "/system/UserinfoManagement/updateAuthority?userId=" + admin.id;
        this.selectRoles.forEach((rs) => {
          url = url+"&authorityIds=" + rs;
        });
        this.putRequest(url).then((resp) => {
          if (resp) {
            this.initAdmins();
            this.initAllRoles();
          }
        });
      }
    },
    showPop(admin) {
      this.initAllRoles();
      let roles = admin.authorityList;
      this.selectRoles = [];
      roles.forEach((r) => {
        this.selectRoles.push(r.id);
      });
    },
    initAllRoles() {
      this.getRequest("/system/AuthorityManagement/get").then((resp) => {
        if (resp) {
          this.allRoles = resp;
        }
      });
    },
    enabledChange(admin) {
      this.updateadmininfo.enabled=admin.enabled;
      this.updateadmininfo.id=admin.id;
      this.updateadmininfo.name=admin.name;
      this.updateadmininfo.username=admin.username;
      this.updateadmininfo.phone=admin.phone;
      this.updateadmininfo.sex=admin.sex;
      this.updateadmininfo.password=admin.password;


      this.putRequest("/system/LectureInfoManagement/getLectureInfoByPage", this.updateadmininfo).then((resp) => {
        if (resp) {
          this.initAdmins();
        }
      });
    },
    deleteAdmin(admin) {
      this.$confirm(
        "此操作将永久删除" + admin.name + "用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/system/UserinfoManagement/delete?id=" +admin.id).then((resp) => {
            if (resp) {
              this.initAdmins();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    doSearch() {
      this.initAdmins();
    },
    initAdmins() {
      this.getRequest("/system/UserinfoManagement/list?keywords=" + this.keywords).then((resp) => {
        if (resp) {
          this.admins = resp;
        }
      });
    },
  },
};
</script>

<style>
.admin-card {
  width: 350px;
  margin-bottom: 20px;
}
.admin-container {
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
  flex-wrap: wrap;
}
.userFace-img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.img-content {
  width: 100%;
  display: flex;
  justify-content: center;
}
.userInfo {
  font-size: 18px;
  color: skyblue;
}
</style>